<template>
  <div class="header">
    <var-input
      variant="outlined"
      size="small"
      placeholder="搜索景点"
      @focus="toSearch"
    >
      <template #append-icon>
        <var-icon name="magnify" />
      </template>
    </var-input>
    <i @click="toGpt" class="iconfont icon-robot-2-line" />
  </div>

  <var-tabs sticky v-model:active="active">
    <var-tab v-for="item in tabs" :key="item">{{ item }}</var-tab>
  </var-tabs>

  <var-list :finished="isLoadAll" v-model:loading="loading" @load="loadMore">
    <scenic-item :dataList />
  </var-list>
  <var-back-top :duration="300" :bottom="80" />
</template>

<script setup lang="ts">
import { useListLoad } from '@/hooks/useListLoad'
import { getUserInfo, getScenicList } from '@/api'
import ScenicItem from '@/components/ScenicItem.vue'
import { useInfoStore } from '@/store/info'

const infoStore = useInfoStore()
onMounted(async () => {
  if (infoStore.userInfo) return
  const res = await getUserInfo()
  if (!res.id) return
  infoStore.userInfo = res
})

const tabs = ['推荐', '休闲', '人文', '现代', '自然']

const active = ref(0)

watch(active, async () => {
  await getData(true)
})

const getData = async (reset = false) => {
  reset && resetFn()

  const params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    sort: 'desc'
  }
  active.value !== 0 && (params.type = active.value - 1)
  loading.value = true
  const res = await getScenicList(params)
  dataList.value = dataList.value.concat(res.list)
  isLoadAll.value = !!(res.total <= dataList.value.length)
  loading.value = false
}

const {
  loading,
  dataList,
  pageNum,
  pageSize,
  isLoadAll,
  reset: resetFn,
  loadMore
} = useListLoad(getData)

const router = useRouter()
const toSearch = () => {
  router.push('/search')
}

const toGpt = () => {
  router.push('/gpt')
}
</script>

<style scoped lang="scss">
.header {
  display: flex;
  align-items: center;

  .var-input {
    flex: 1;
    margin-right: 10px;
  }
}
</style>
